
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>GeoAR.js demo</title>
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
    <script src="./aframe-ar-nft.js"></script>
    <style>
        #buttons {
            position: absolute;
            bottom: 30px;
            left: 50%;
            width: 100%;
            height: 5em;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            display: none;
        }

        #say-hi-button {
            padding: 0.25em;
            border-radius: 4px;
            border: none;
            background: white;
            color: black;
            width: 5em;
            height: 2em;
            cursor: pointer;
        }

        #search-text{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            display: none;
            color: aqua;
            z-index: 10;
        }
        /* video {
            mix-blend-mode: screen;
        } */
    </style>
    <script>
        window.onload = function() {
            AFRAME.registerComponent('videohandler', {
                init: function () {
                    let marker = this.el;
                    this.vid = document.querySelector("#vid");
                    marker.addEventListener('markerFound', function () {
                        this.vid.play();
                        document.querySelector("#search-text").style.display = 'block';
                        document.querySelector("#buttons").style.display = 'block';

                        window.onload = function () {
                            document
                            .querySelector("#say-hi-button")
                            .addEventListener("click", function () {
                                alert("收集成功");
                            });
                        };
                    }.bind(this));
            marker.addEventListener('markerLost', function() {
                console.log(2);
                this.vid.pause();
                this.vid.currentTime = 0;
            }.bind(this));
                }
            });
        };
        window.addEventListener("arjs-nft-loaded", (event) => {
         console.log(3);
        });
    </script>
</head>

<body style='margin : 0px; overflow: hidden;'>
    <div id="buttons">
        <button id="say-hi-button">点击上传</button>
    </div>
    <p id="search-text">寻景成功！（+1 探索点)</p>
    <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
        <a-assets>
            <video id="vid" src="https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/demo.webm" preload="auto" response-type="arraybuffer" loop
                crossorigin webkit-playsinline autoplay muted playsinline>
            </video>
        </a-assets>

        <a-nft
            emitevents="true"
            videohandler
            type='nft' url='./dataNFT/trees'
            smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5"
        >
            <a-video
                transparent="true"
                shader="standard"
                src="#vid"
                rotation='90 0 180'
                width="140"
                height="220"
                position="140 -50 -200"
                >
            </a-video>
        </a-nft>
		<a-entity camera position="0 0 5" />
	</a-scene>
</body>
</html>





<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Document</title>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
      <script>
        window.onload = function() {
            AFRAME.registerComponent('videohandler', {
                init: function () {
                    let marker = this.el;
                    marker.addEventListener('markerFound', function () {
                        document.querySelector("#playButton").style.display = 'block';
                        document.querySelector("#search-text").style.display = 'block';
                        document.querySelector("#buttons").style.display = 'block';

                        window.onload = function () {
                            document
                            .querySelector("#say-hi-button")
                            .addEventListener("click", function () {
                                alert("收集成功");
                            });
                        };
                    }.bind(this));
            marker.addEventListener('markerLost', function() {
                document.querySelector("#playButton").style.display = 'none';
            }.bind(this));
                }
            });
        };
        function play(id){
            let sceneEl = document.querySelector('a-scene');
            let videos = sceneEl.querySelector('a-video');
            let aVideoAsset = document.querySelector('#' + id);
            videos.setAttribute('visible', true);
            aVideoAsset.play().catch(function (error) {
                aVideoAsset.pause();
                hideOrShow("playButton");

            });
            aVideoAsset.setAttribute('loop', 'false');
            hideOrShow('playButton');
            }
            function hideOrShow(id) {
            let x = document.getElementById(id);
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
        <style>
            #buttons {
                position: absolute;
                bottom: 30px;
                left: 50%;
                width: 100%;
                height: 5em;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                display: none;
            }
            #say-hi-button {
                padding: 0.25em;
                border-radius: 4px;
                border: none;
                background: white;
                color: black;
                width: 5em;
                height: 2em;
                cursor: pointer;
            }
            #search-text{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                display: none;
                color: aqua;
                z-index: 10;
            }
            .play-overlay {
                z-index: 99999;
                position: fixed;
                bottom: 20px;
                right: 20px;
                box-sizing: border-box;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                padding: 12px 24px;
                padding-bottom: 0px;
                background: rgba(0, 123, 255) url(./image/place.png) center no-repeat;
                background-size: 40px 40px;
            }
            .play-overlay:hover {
                background: rgba(0, 0, 0, 0.2) url(./image/place.png) center no-repeat;
                background-size: 40px 40px;
            }
            #playButton{display: none;}
        </style>
</head>
<body>
    <a id="playButton" onclick="play('alpha')"><div class="btn btn-primary play-overlay menu-overlay"></div></a>
    <div id="buttons">
        <button id="say-hi-button">点击上传</button>
    </div>
    <p id="search-text">寻景成功！（+1 探索点)</p>
    <a-scene vr-mode-ui='enabled: false;'
    renderer="logarithmicDepthBuffer: true;"
    embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
    <a-assets>
        <video id="alpha" src="https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/demo.webm" preload="auto" loop
                crossorigin webkit-playsinline autoplay muted playsinline>
        </video>
    </a-assets>

    <a-marker-camera preset='custom' type='pattern' url='./pinball.patt'>
        <a-video id="vid" visible="false" width="100" height="250" position="200 -10 -750" rotation="0 0 0" src="#alpha">
            <video  width="100" height="250" src="#source"></video>
        </a-video>
    </a-marker-camera>

    <a-marker preset='custom' type='pattern' url='./pinball.patt' videohandler smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5" emitevents="true">
    </a-marker>

    <a-entity camera position="0 0 5" />
    </a-scene>
</body>
</html> -->



<!-- <html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="./aframe-ar-nft.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            const sceneEl = document.querySelector("a-scene");
            sceneEl.addEventListener("loaded", () => {
            sceneEl.camera = new THREE.PerspectiveCamera();
            });
            AFRAME.registerComponent('videohandler', {
                init: function () {
                    let marker = this.el;
                    this.vid = document.querySelector("#vid");
                    marker.addEventListener('markerFound', function () {
                        document.getElementById('vid2').play();
                        document.getElementById('alpha2').play();
                        document.getElementById("scannerContainer").style.display = "none";
                        document.getElementById("imgContainer").style.display = "none";
                    }.bind(this));
            marker.addEventListener('markerLost', function() {
                document.getElementById("scannerContainer").style.display = "";
                document.getElementById("imgContainer").style.display = "";
                console.log("lost");
            }.bind(this));
                }
            });
        };
    </script>
  </head>
  <body>
    <a-scene>
    <a-assets>
      <video id="alpha2" loop="true" src="https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/demo.webm" autoplay muted></video>
    </a-assets>
    <a-nft
        emitevents="true"
        videohandler
        type="nft"
        url="./dataNFT/trees"
        smooth="true"
        smoothCount="10"
        smoothTolerance="0.01"
        smoothThreshold="5"
    >
      <a-video id = "vid2"  width="250" height="450" position="250 0 -180" rotation="90 0 180" src="#alpha2" autoplay muted>
        <video width="250" height="450" src="#source" />
      </a-video>
    </a-nft>
    <a-entity camera position="0 0 5" />
    </a-scene>
    </body>
</html>
 -->
